<template>
    <div>
        <div class="product">
            <div class="product-title">产品*</div>
            <div class="product-content">
                <Row>
                    <Col span="16">
                        <div class="product-list-title">
                            <p>测评配置库</p>
                            <Row>
                                <Col span="2">搜索:</Col>
                                <Col span="16">
                                    <Input v-model="product.evaluationName" placeholder="请输入" />
                                </Col>
                                <Col span="6">
                                    <Button type="primary">搜索</Button>
                                </Col>
                            </Row>
                        </div>
                        <div class="product-list">
                            <p>
                                每页显示记录数:
                                <Select
                                    v-model="product.pageSize"
                                    style="width:100px"
                                    @on-change="changePageSize"
                                >
                                    <Option
                                        v-for="item in options"
                                        :value="item.value"
                                        :key="item.value"
                                    >{{ item.value }}</Option>
                                </Select>
                            </p>
                            <CheckboxGroup v-model="checkItem" @on-change="checkProduct">
                                <ul>
                                    <li v-for="item in productList" :key="item.id">
                                        <Checkbox :label="'' + item.id">{{ item.evaluationName }}</Checkbox>
                                    </li>
                                </ul>
                                <p>显示第1-5条，共5条</p>
                            </CheckboxGroup>
                        </div>
                    </Col>
                    <Col span="8">
                        <div class="product-list-title">
                            <p>所选产品：</p>
                            <ul>
                                <li
                                    v-for="item in productItem"
                                    :key="item.id"
                                >{{ item.evaluationName }}</li>
                            </ul>
                        </div>
                    </Col>
                </Row>
            </div>
        </div>
        <br />
        <Button type="primary" style="float:right;margin:0 10px;" @click="pushProduct">下一步</Button>
        <Button type="primary" style="float:right;margin:0 10px;" @click="prve">上一步</Button>
    </div>
</template>
<script>
import instance from "@/http/http";
export default {
    props: {
        product: {
            type: Object,
            default: () => {
                return {
                    pageSize: 5,
                    pageNum: 1,
                    pages: 0,
                    evaluationName: ""
                };
            }
        }
    },
    data() {
        return {
            options: [
                { value: 5 },
                { value: 10 },
                { value: 15 },
                { value: 20 },
                { value: 25 }
            ],
            checkItem: [],
            productList: [],
            productItem: []
        };
    },
    mounted() {
        this.getProductList();
    },
    methods: {
        prve() {
            this.$store.dispatch("changeTabName", "1");
        },
        pushProduct() {
            if (this.checkItem.length > 0) {
                instance
                    .post("/item/evaluation/update", this.productItem)
                    .then(res => {
                        if (res.code == 200) {
                            this.$store.dispatch("changeTabName", "3");
                        } else {
                            this.$Message.error("添加测评失败");
                        }
                    });
            } else {
                this.$Message.error("至少选择一个测评");
            }
        },
        checkProduct(id) {
            this.productItem = [];
            var data = JSON.parse(JSON.stringify(this.productList));
            var datas = {};
            console.log(data)
            for (var k = 0; k < data.length; k++) {
                for (var i = 0; i < id.length; i++) {
                    if (data[k].id == id[i]) {
                        datas.itemId = sessionStorage.getItem("itemId");
                        datas.companyId = localStorage.getItem("companyId");
                        datas.candidateId = data[k].id;
                        datas.id = "";
                        datas.evaluationId = data[k].id;
                        console.log(datas)
                        this.productItem.push(datas);
                    }
                }
            }
        },
        changePageSize(value) {
            this.product.pageSize = value;
            this.getProductList();
        },
        getProductList() {
            instance.post("/evaluation/queryName", this.product).then(res => {
                this.productList = res.data.list;
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.product {
    width: 100%;
    padding-bottom: 10px;
    line-height: 40px;
    border: 1px solid #5cadff;

    .product-title {
        height: 45px;
        padding: 10px;
        box-sizing: border-box;
        background: #eee;
        line-height: 25px;
        color: #5cadff;
        border-bottom: 1px solid #5cadff;
    }
    .product-content {
        .product-list-title {
            padding-left: 20px;
            font-size: 18px;
            font-weight: 500;
        }
        .product-list {
            margin: 20px;
            box-sizing: border-box;
            padding: 20px;
            background: #eee;
            ul {
                width: 100%;
                background: #fff;
                border: 1px solid #999;
                li {
                    padding: 5px 10px;
                    line-height: 20px;
                    box-sizing: border-box;
                }
            }
        }
    }
}
</style>
